<div ng-controller="todayCalorieCtl">
    <!-- Calorie at a glance -->
    <div class="alert alert-warning" role="alert" ng-if="ui.todayCaloriePercentage > 100">
        <span class="glyphicon glyphicon-exclamation-sign"></span>&nbsp;カロリーオーバーです。
    </div>
    <div class="row calorie-container">
        <div class="col-sm-6 today-calorie-info-container">
            <div style="text-align:center; margin: 0px auto 0 auto; border-bottom: solid 1px #ddd; margin-bottom: 20px; width:100%;">
                <div class="calorie-percentage-label" style="text-align:center;"><span class="glyphicon glyphicon-fire"></span>&nbsp;カロリー充足率</div>
                <span class="calorie-percentage-value">{{ui.todayCaloriePercentage}}</span><span style="font-size:30pt;">&nbsp;%</span>
            </div>
            <div style="text-align:center;">
                <span ng-if="ui.todayCaloriePercentage < 100" style="font-size: 1.3em;">満タンまであと {{ui.todayCalorieToGo}}kcal</span>
                <span ng-if="ui.todayCaloriePercentage == 100" style="font-size: 1.3em;">ジャストミート</span>
                <span ng-if="ui.todayCaloriePercentage > 100" style="font-size: 1.3em; color:#FF6384;">{{ui.todayCalorieToGo * -1}}kcal 超過しています</span>
            </div>
        </div>
        <div class="col-sm-6 today-calorie-chart-container">
            <canvas id="today-calorie-chart" class="today-calorie-chart" style="margin: 0 auto;" height="200px" width="200px"></canvas>
        </div>
        <div class="col-sm-6" id="today-calorie-matrix">
            <table class="table" style="margin-top: 20px;">
                <tr>
                    <th>目標量</th>
                    <td>{{state.person.requiredCalorie}} kcal</td>
                </tr>
                <tr>
                    <th>摂取量</th>
                    <td>{{ui.todayCalorie}} kcal</td>
                </tr>
            </table>
        </div>
    </div>
</div>
